<template>
  <div class="chat">
    <h1> websocket </h1>
    <div class="content" ref="content">
      <div v-for="(item, i) in state.recordContent" :key="i">
        <div class="contentGuest" v-if="item.guest"
          ><img src="../../assets/avatar2.jpg" alt="" />{{ item.content }}
          <div class="guestTime">{{ item.time }}</div>
        </div>
        <div class="contentMaster" v-else>
          {{ item.content }} <img src="../../assets/avatar.jpg" alt="" />
          <div class="masterTime">{{ item.time }}</div>
        </div>
      </div>
    </div>
    <div class="bottomBar">
      <el-input v-model="state.sendMessage" @keyup.enter="sendMsg"></el-input>
      <el-button @click="sendMsg" type="primary" style="height: 50px; margin-left: 10px">
        <component class="icon-send" size="20" :is="'icon-send'" /> 发送</el-button
      >
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Vue3AdminElementTemplateMasterRemoveMockIndex',
  };
</script>
<script setup>
  import { getNormalTime } from '../../utils/time';
  import { reactive, ref, onMounted, onUpdated, onUnmounted, nextTick } from 'vue';
  import { ElMessage } from 'element-plus';
  const content = ref(null);
  const scrollToBottom = () => {
    content.value.scrollTop = content.value.scrollHeight;
  };
  const ws = new WebSocket('ws://124.221.92.17:5001/ws');
  ws.addEventListener('open', (event) => {
    console.log('WebSocket连接已建立');
  });
  ws.addEventListener('message', (event) => {
    const message = event.data;
    console.log('收到消息：', message);
    state.recordContent.push({
      guest: true,
      content: message,
      time: getNormalTime(),
    });
    nextTick(() => {
      scrollToBottom();
    });
  });
  ws.addEventListener('close', (event) => {
    if (event.wasClean) {
      console.log('WebSocket连接已关闭');
    } else {
      console.error('WebSocket连接异常断开');
    }
  });
  ws.addEventListener('error', (error) => {
    console.error('WebSocket连接错误：', error);
  });
  onMounted(() => {});
  onUpdated(() => {
    // scrollToBottom();
  });
  onUnmounted(() => {
    ws.close();
  });
  const state = reactive({
    recordContent: [
      {
        guest: true,
        content: '我接收的message',
        time: '2023年8月29日9时49分18秒',
      },
    ],
    sendMessage: '',
  });

  const sendMsg = () => {
    if (state.sendMessage != '') {
      state.recordContent.push({
        guest: false,
        content: state.sendMessage,
        time: getNormalTime(),
      });

      ws.send(state.sendMessage);
      state.sendMessage = '';
      nextTick(() => {
        scrollToBottom();
      });
    } else {
      ElMessage.warning('输入为空！');
    }
  };
</script>
<style lang="scss" scoped>
  .chat {
    padding: $base-main-padding;
    background-color: $base-color-white;
  }
  .content {
    height: 500px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid;
    padding: 20px;
    word-break: break-all;
    .contentGuest {
      display: flex;
      align-items: center;
      margin-bottom: 50px;
      min-height: 20px;
      position: relative;
      overflow-wrap: break-all;
      word-wrap: break-all;
      img {
        border-radius: 50%;
        width: 20px;
        margin-right: 10px;
      }
      .guestTime {
        font-size: 10px;
        position: absolute;
        bottom: -20px;
        color: hotpink;
      }
    }

    .contentMaster {
      display: flex;
      align-items: center;
      margin-bottom: 50px;
      justify-content: flex-end;
      min-height: 20px;
      position: relative;
      word-wrap: break-all;
      overflow-wrap: break-all;
      img {
        border-radius: 50%;
        width: 20px;
        margin-left: 10px;
      }
      .masterTime {
        font-size: 10px;
        position: absolute;
        bottom: -20px;
        color: hotpink;
      }
    }
  }

  .bottomBar {
    margin-top: 10px;
    height: 50px;
    border: 1px solid;
    display: flex;
    padding: 10px;
  }
</style>
